//垂直居中,并且自动增加padding
.flex-center {
    display: flex;
    align-items: center;
    padding: $com-padding-lr-base;
}
//左右浮动
.fl {
   float: left; 
}
.fr {
    float: right;
}
//清楚浮动
.clearfix::after {
    content: " ";
    display: table;
    clear: both;
}
.clearfix::before {
    content: " ";
    display: table;
    clear: both;
}
//文字居右
.text-right {
    text-align: right;
}
.sort-caret {
    width: 0;
    height: 0;
    margin-left: rem(3);
    display: inline-block;
    border: 5px solid transparent
}
.sort-caret.up {
    vertical-align: 2px;
    border-bottom-color: currentColor;
}
.sort-caret.down {
    vertical-align: -2px;
    border-top-color: currentColor;
}
.caret-wrap {
    vertical-align: middle;
    display: inline-flex;
    flex-direction: column;
    color: #aaa;
}
.caret-wrap .active {
    color: #333;
}
.sort-caret.ascending {
    border-bottom-color: currentColor;
}
.sort-caret.descending {
    border-top-color: currentColor;
    margin-top:1px;
}
//向下的三角形
.s-icon-down {
    display: inline-block;
    margin-left: rem(5);
    vertical-align: -2px;
    width: 0;
    height: 0;
    border-width: 5px;
    border-style: solid;
    border-top-color: currentColor;
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
}
